<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HEX文件转BIN工具</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3b82f6',     // 蓝色主色调
            secondary: '#10b981',   // 绿色辅助色
            dark: '#111827',
            light: '#f9fafb'
          },
          fontFamily: {
            sans: ['Inter', 'sans-serif']
          }
        }
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-thin {
        scrollbar-width: thin;
      }
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }
      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .log-line {
        @apply px-4 py-1.5 text-sm border-b border-gray-200 transition-all duration-150;
      }
      .log-line:hover {
        @apply bg-gray-50;
      }
      .log-info {
        @apply text-gray-800;
      }
      .log-warning {
        @apply text-yellow-700 bg-yellow-50;
      }
      .log-error {
        @apply text-red-700 bg-red-50;
      }
      .upload-card {
        @apply bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg;
      }
      .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary/50;
      }
      .btn-secondary {
        @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-all duration-200;
      }
    }
  </style>
  
  <!-- 设置全屏高度 -->
  <style>
    html, body, #app {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>    